<template>
  <div class="login-container">
     <div class="login_box">
        <h1 style="color:white;">进思学院后台管理系统</h1>
        <el-form :rules="rules" :model="loginForm" ref="loginFormRef">
          <el-form-item prop="userName">
            <el-input v-model="loginForm.userName" placeholder="请输入用户名">
                  <template #prepend>
                    <el-button :icon="Avatar" />
                  </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
              <el-input v-model="loginForm.password">
                 <template #prepend>
                    <el-button :icon="Clock" />
                  </template>
              </el-input>
          </el-form-item>
          <el-form-item prop="veri">
              <div style="display: flex; ">
                <el-input v-model="loginForm.veri"  style="width:220px;height: 40px;">
                   <template #prepend>
                    <el-button :icon="Sunrise" />
                  </template>
                </el-input>
                <div>
                  <veri-com></veri-com>
                </div>
              </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">忘记密码</el-button>
            <el-button type="success" @click="toLogin">登录</el-button>
          </el-form-item>
        </el-form>
     </div>
  </div>
</template>

<script setup lang="ts">
// wegGl h5新增的最新3d api
// three.js 基于webGl 封装的框架
// thingjs 基于three.js封装的框架
import {Clock,Avatar,Sunrise}  from '@element-plus/icons-vue'
import {checkVeri,loginApi} from '@/api/login'
import type { FormInstance } from 'element-plus'
import veriCom from './veriCom.vue'
import {reactive,ref} from 'vue'
import { ElMessage } from 'element-plus'
import {useRouter} from 'vue-router'
let router=useRouter()
let loginForm=reactive({
  veri:"",
  userName:"",
  password:""
})
let rules={
  userName:[{required:true,message:"请输入用户名",trigger:"blur"}],
  password:[{required:true,message:"请输入密码",trigger:"blur"}],
  veri:[{required:true,message:"请输入验证码",trigger:"blur"}]
}
let loginFormRef=ref<FormInstance|null>(null)
let toLogin=()=>{
  loginFormRef.value?.validate(async (valid)=>{
    if(valid){
      // 校验验证码接口
       let veriRes=await checkVeri(loginForm.veri)
       console.log(veriRes,"------")
      if(veriRes.success){
        // 登录接口
          let loginRes=await loginApi({
            userName:loginForm.userName,
            password:loginForm.password
         })  
         console.log(loginRes,"--------")
         if(loginRes.success){
            // 将token存储到 localStorage
          localStorage.setItem("token",loginRes.tokenId)
            ElMessage.success("登录成功，跳转主页....")
            router.push("/layout")
         }else{
              ElMessage.error(loginRes.err)
         }
      

      }else{
        ElMessage.error("验证码错误")
      }
     
    }
  })
}



</script>

<style scoped lang="scss">
  .login-container{
    width: 100%;
    height:100vh;
    background-color: rgb(12,24,84);
    display: flex;
    justify-content: center;
    align-items: center;
    .login_box{
      width: 600px;
      height: 500px;
      // background: white;
      display: flex;
      flex-direction: column;
      // justify-content: space-around;
      align-items: center;
      h1{
        margin-top: 30px;
      }
      .el-form-item{
        width: 400px;
        margin-top: 30px;
      }
    }
  }
</style>